/*px em rem 等元素的演示*/

html {
    font-size: 62.5%;
    /*16px*0.625 = 10px*/
}

body {
    font-size: 1em;
}


/*
习惯这么做,更好做计算
*/

.value_px {
    font-size: 32px;
}

.value_em {
    font-size: 2em;
}


/*对于父元素*/

.value_rem {
    font-size: 2rem;
}


/*对于根元素html*/


/*颜色值*/

.color_name {
    color: red;
}

.color_hex {
    color: #00ff00;
}

.color_fun {
    color: rgb(0, 0, 255);
}

.img_url {
    width: 500px;
    height: 297px;
    background-image: url("/css_base/可乐.jpg");
}

.font_demo {
    color: red;
    font-size: 2em;
    font-family: "微软雅黑", sans-serif;
    font-style: italic;
    font-weight: bold;
}


/* 常见文本样式展示 */

.text_demo {
    font-size: 2em;
    border: 1px solid blue;
    width: 50rem;
    height: 10rem;
    text-align: left;
    line-height: 10rem;
    text-decoration: line-through;
    text-indent: 3rem;
    letter-spacing: 1rem;
    word-spacing: 2rem;
}


/*常见列表样式展示*/

ul {
    font-size: 2em;
}

.list_demo1 {
    list-style: square inside;
}

.list_demo2 {
    list-style: none;
}

.list_demo3 {
    list-style-image: url(/html_base/Guatai.gif);
    list-style-type: none;
    list-style-position: inside;
}


/*简写*/

.list_demo4 {
    list-style: none url(/html_base/Guatai.gif) inside;
}


/* 背景样式属性演示 */

.bg_box {
    border: 1px solid red;
    width: 40rem;
    height: 10rem;
}

.bg_demo1 {
    background-color: aquamarine;
}

.bg_demo2 {
    background-image: url(/html_base/Guatai.gif);
}

.bg_demo3 {
    background-image: url(/html_base/Guatai.gif);
    background-repeat: no-repeat;
}

.bg_demo4 {
    background-image: url(/html_base/Guatai.gif);
    background-repeat: no-repeat;
    background-position: 10px 20px;
}

.bg_demo5 {
    background-image: url(可乐.jpg);
    background-repeat: no-repeat;
    background-position: top 10px right 20px;
}

.bg_demo6 {
    background-image: url(/html_base/Guatai.gif);
    background-repeat: no-repeat;
    background-position: top right;
    background-attachment: fixed;
}

.bg_demo7 {
    background: silver url(/html_base/Guatai.gif) no-repeat top right fixed;
}


/*表格样式*/

.table_demo {
    font-size: 2rem;
    border: black 2px solid;
    width: 70%;
    margin: 0 auto;
    table-layout: fixed;
    border-collapse: collapse;
    caption-side: top;
    border-spacing: ;
}

.table_demo caption {
    font-size: 3rem;
}

.table_demo th,
.table_demo td {
    border-top: 1px solid;
    border-bottom: 1px solid;
    text-align: center;
}

.table_demo thead {
    background-color: chocolate;
}

.table_demo tbody td:hover {
    background: coral;
    cursor: pointer;
}

.table_demo tfoot td:hover {
    background-color: blueviolet;
    text-align: center;
}


/* 表单样式 */

.form_demo {
    font-size: 1.4rem;
    width: 35rem;
    height: 25rem;
    background-color: beige;
    border: 1px solid seagreen;
    text-align: center;
}

.form_demo input[type="text"],
.form_demo input[type="password"] {
    height: 48px;
    width: 200px;
    padding-left: 53px;
    font-size: 1.6rem;
    border-bottom: 2px solid #000000;
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

.form_demo #username {
    background: #fff url(username.png) no-repeat top left;
}

.form_demo #pwd {
    background: #fff url(password.png) no-repeat top left;
}

.form_demo [type="submit"] {
    width: 100px;
    height: 38px;
    background-color: rgb(219, 133, 34);
    border: 1px dashed rgb(148, 153, 235);
    border-radius: 10px;
    color: aliceblue;
}